<template>
  <div class="carts">
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" />
    <van-notice-bar
      wrapable
      :scrollable="false"
      text="宁夏,青海,甘肃,新疆,西藏,澳门,香港,台湾海外不包邮,疫情影响部分地区暂时无法发货"
    />
    <div class="container">
      <!-- 中间区域 -->
      <!-- 单条数据 -->

      <div class="item">
        <!-- 商品信息 -->
        <div>
          <!-- 商家信息 -->
          <div class="logo_name">
            <img src="/img/shouye/1.png" alt="" />
            <span>淘一淘婚纱旗舰店</span>
          </div>
          <!-- 详细内容区域 -->
          <div class="shop_detail">
            <img src="/img/yongpin1/1.png" alt="" />
            <div class="detail_list">
              <span>这是 一个 喜糖 </span>
              <div class="list_family">
                <span>商品规格</span>
                <span>1000g</span>
              </div>
              <div class="list_price">￥1234.00</div>
            </div>
          </div>
          <!-- 购买数量 -->
          <div class="shop_num">
            <span>购买数量</span>
            <div>
              <button>-</button>
              <input type="text" value="1" />
              <button>+</button>
            </div>
          </div>
        </div>

        <!-- *********************************** -->
      </div>
    </div>
    <footer>
      <div class="footer_left">
        实际付款
        <span>￥{{ numprice }} 免运费</span>
      </div>
      <div class="footr_right" @click="BuyNow">立即付款</div>
    </footer>
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/linggan" icon="search">婚礼灵感</van-tabbar-item>
      <van-tabbar-item to="/yongpin" icon="shop-o">结婚用品</van-tabbar-item>
      <van-tabbar-item to="/carts" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item to="/me" icon="friends-o">我们</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 3,
      numprice: 0,
      num: 1,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    BuyNow() {
      this.$router.push("/dingdan");
    },
  },
};
</script>

<style>
.container {
  background: #fff;
  padding: 10px;
}

/* .item {
  padding: 0 15px;
  border-bottom: 1px solid #ccc;
} */

.mint-cell-value {
  display: none;
}
.logo_name {
  height: 40px;
  display: flex;
  align-items: center;
}
.logo_name img {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  border-radius: 50%;
}
.logo_name span {
  margin-left: 10px;
  font-size: 12px;
}
.shop_detail {
  background-color: #f5f5f5;
  padding: 15px;
  font-size: 12px;
  display: flex;
}
.shop_detail img {
  width: 100px;
  height: 90px;
}
.detail_list {
  margin-left: 15px;
}
.detail_list > span {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}
.list_family span {
  display: block;
  margin-top: 2px;
  color: #888;
}
.list_price {
  color: red;
  font-size: 14px;
}
.shop_num {
  color: #888;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.shop_num button {
  width: 30px;
  height: 25px;
  background-color: #e0e0e0;
  border: none;
  outline: none;
}
.shop_num input {
  width: 38px;
  height: 25px;
  border: none;
  text-align: center;
  background-color: #fff;
}
.it_swipe {
  line-height: 207px !important;
}
/*  */
footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 50px;
  left: 0;
  background: #fff;
  border-top: 1px solid #ccc;
  display: flex;
}
.footer_left {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  padding-right: 9px;
}
.footer_left span {
  color: red;
}
.footr_right {
  background: red;
  color: #fff;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>